<template>
  <div id="EditPage">
    <a-layout id="components-layout-demo-top" class="layout">
      <a-layout-header>
        <div class="logo"/>
      </a-layout-header>
      <a-layout-content :style="{ padding: '0 50px' }">
        <!--编辑知识点-->
        <div
            :style="{
            background: '#fff',
            padding: '24px',
            marginTop: '20px',
            minHeight: '280px',
          }"
        >
          <p>编辑知识点</p>

          <a-form-model
              :model="form"
              :label-col="labelCol"
              :wrapper-col="wrapperCol"
          >
            <a-form-model-item label="pointId">
              <a-input v-model="form.point.pointId"/>
            </a-form-model-item>

            <a-form-model-item label="pointName">
              <a-input v-model="form.point.pointName"/>
            </a-form-model-item>

            <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
              <a-button
                  type="primary"
                  @click="() => openNotificationWithIcon('success')"
              >
                提交
              </a-button>
            </a-form-model-item>
          </a-form-model>
        </div>
        <!--编辑节点关系-->
        <div
            :style="{
            background: '#fff',
            padding: '24px',
            marginTop: '20px',
            minHeight: '280px',
          }"
        >
          <p>编辑节点关系</p>

          <a-form-model
              :model="form"
              :label-col="labelCol"
              :wrapper-col="wrapperCol"
          >
            <a-form-model-item label="pointId">
              <a-input v-model="form.edge.pointId"/>
            </a-form-model-item>

            <a-form-model-item label="beforeId">
              <a-input v-model="form.edge.beforeId"/>
            </a-form-model-item>

            <a-form-model-item label="afterId">
              <a-input v-model="form.edge.afterId"/>
            </a-form-model-item>

            <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
              <a-button
                  type="primary"
                  @click="() => openNotificationWithIconEdge('success')"
              >
                提交
              </a-button>
            </a-form-model-item>
          </a-form-model>
        </div>

        <!--上传文件-->
        <div
            :style="{
            background: '#fff',
            padding: '24px',
            marginTop: '20px',
            minHeight: '280px',
          }"
        >
          <p>上传文件</p>

          <a-form-model
              :model="form"
              :label-col="labelCol"
              :wrapper-col="wrapperCol"
          >
            <a-form-model-item label="pointId">
              <a-input v-model="form.file.pointId"/>
            </a-form-model-item>

            <a-form-model-item label="type">
              <a-input v-model="form.file.type"/>
            </a-form-model-item>

            <a-form-model-item label="uploader">
              <a-input v-model="form.file.uploader"/>
            </a-form-model-item>

            <a-form-model-item label="file">
              <a-input v-model="form.file.file"/>
            </a-form-model-item>
            <div class="clearfix">
              <a-upload
                  :file-list="fileList"
                  :remove="handleRemove"
                  :before-upload="beforeUpload"
              >
                <a-button>
                  <a-icon type="upload"/>
                  Select File
                </a-button>
              </a-upload>
              <a-button
                  type="primary"
                  :disabled="fileList.length === 0"
                  :loading="uploading"
                  style="margin-top: 16px"
                  @click="handleUpload"
              >
                {{ uploading ? "Uploading" : "Start Upload" }}
              </a-button>
            </div>

            <div id="sc">
              <b-field
                  class="file is-primary"
                  :class="{ 'has-name': !!wzyfile }"
              >
                <b-upload v-model="wzyfile" class="file-label">
                  <span class="file-cta">
                    <b-icon class="file-icon" icon="upload"></b-icon>
                    <span class="file-label">上传文件</span>
                  </span>
                  <span class="file-name" v-if="file">
                    {{ wzyfile.name }}
                  </span>
                </b-upload>
              </b-field>
              <b-button @click="Upload()">点击上传</b-button>
            </div>

            <a-form-model-item label="content">
              <a-input v-model="form.file.content"/>
            </a-form-model-item>

            <a-form-model-item label="uploader">
              <a-input v-model="form.file.uploader"/>
            </a-form-model-item>

            <a-form-model-item label="degree">
              <a-input v-model="form.file.degree"/>
            </a-form-model-item>

            <a-form-model-item label="tag">
              <a-input v-model="form.file.tag"/>
            </a-form-model-item>

            <a-form-model-item label="origin">
              <a-input v-model="form.file.origin"/>
            </a-form-model-item>

            <a-form-model-item label="creator">
              <a-input v-model="form.file.creator"/>
            </a-form-model-item>

            <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
              <a-button
                  type="primary"
                  @click="() => openNotificationWithIconEdge('success')"
              >
                提交
              </a-button>
            </a-form-model-item>
          </a-form-model>
        </div>
      </a-layout-content>
    </a-layout>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: [],
      uploading: false,

      wzyfile: null,

      labelCol: {span: 4},
      wrapperCol: {span: 14},
      form: {
        point: {
          pointId: "",
          pointName: "",
        },
        edge: {
          pointId: "",
          beforeId: "",
          afterId: "",
        },
        file: {
          pointId: "",
          type: "",
          uploader: "",
          file: null,
          content: "",
          degree: "",
          tag: "",
          origin: "",
          creator: "",
        },
      },
    };
  },
  methods: {
    openNotificationWithIcon(type) {
      // console.log('Pointsubmit!', this.form.point);
      this.$http
          .post("http://1.117.249.55//2backcode/point/save", {
            pointId: this.$data.form.point.pointId,
            pointName: this.$data.form.point.pointName,
          })
          .then((response) => {
            this.$notification[type]({
              message: "知识点上传成功",
              description: `pointId:${response.data.pointId}
            pointName:${response.data.pointName}`,
            });
            // console.log(response);
          });
    },
    openNotificationWithIconEdge(type) {
      // console.log('Edgesubmit!', this.form.edge);

      this.$http
          .post("http://1.117.249.55//2backcode/edge/save", {
            pointId: this.$data.form.edge.pointId,
            beforeId: this.$data.form.edge.beforeId,
            afterId: this.$data.form.edge.afterId,
          })
          .then((response) => {
            this.$notification[type]({
              message: "节点关系上传成功",
              description: `pointId:${response.data.pointId}
                  edgeId:${response.data.edgeId}
                  afterId:${response.data.afterId}`,
            });
            console.log(response);
          });
    },

    handleRemove(file) {
      const index = this.fileList.indexOf(file);
      const newFileList = this.fileList.slice();
      newFileList.splice(index, 1);
      this.fileList = newFileList;
    },
    beforeUpload(file) {
      this.fileList = [...this.fileList, file];
      return false;
    },
    handleUpload() {
      const {fileList} = this;
      const formData = new FormData();
      fileList.forEach((file) => {
        formData.append("files[]", file);
      });
      this.uploading = true;

      // You can use any AJAX library you like
      this.$http({
        url: "http://1.117.249.55//2backcode/address/uploadFile",
        method: "post",
        processData: false,
        data: formData,
      }).then((response) => {
        this.fileList = [];
        this.uploading = false;
        this.$message.success("upload successfully.");
      });
    },

    async Upload() {
      var data = new FormData();
      data.append("name", "SakuraTomoya");
      data.append("file", this.wzyfile);
      let res = await this.$http
          .post("/api/2backcode/address/uploadFile", data)
          .then((response) => {
            this.$message.success("upload successfully.");
          });
      //   console.log(res.data)
    },
  },
};
</script>

<style>
#EditPage {
  height: 100%;
}

.clearfix {
  padding-left: 155px;
  padding-bottom: 10px;
}

#sc {
  padding-left: 155px;
}
</style>
